<template>
  <div>
    <TopNav title="编辑资料" />
    <div class="imgWrapper">
      <!-- after-read 是选中图片后的回调函数, 可以接收到图片数据对象 -->
      <van-uploader :after-read="afterRead">
        <img
          v-if="userInfo.head_img"
          :src="$axios.defaults.baseURL + userInfo.head_img"
          alt=""
          class="avatar"
        />
        <img v-else src="@/assets/logo.png" alt="" class="avatar" />
      </van-uploader>
    </div>
    <ProfileBar
      label="昵称"
      :desc="userInfo.nickname"
      @click.native="isShowNickname = true"
    />
    <ProfileBar
      label="密码"
      desc="******"
      @click.native="isShowPassword = true"
    />
    <ProfileBar
      label="性别"
      :desc="userInfo.gender == 1 ? '男' : '女'"
      @click.native="isShowGender = true"
    />
    <!-- 以上都是咱们的布局 -->
    <!-- 下面可以放弹窗的内容,
    因为弹窗本身的显示布局和样式,
    不受我们控制, 都是组件已经封装好的 -->
    <van-dialog
      v-model="isShowNickname"
      show-cancel-button
      title="修改昵称"
      @confirm="setNickname"
    >
      <van-field v-model="newNickname" placeholder="请输入昵称" />
    </van-dialog>

    <van-dialog
      v-model="isShowPassword"
      show-cancel-button
      title="修改密码"
      @confirm="setPassword"
    >
      <van-field
        type="password"
        v-model="newPassword"
        placeholder="请输入密码"
      />
    </van-dialog>

    <van-action-sheet
      v-model="isShowGender"
      :actions="genderList"
      @select="setGender"
      cancel-text="取消"
    />
  </div>
</template>

<script>
import TopNav from "../components/TopNav";
import ProfileBar from "../components/ProfileBar";
export default {
  components: {
    TopNav,
    ProfileBar
  },
  data() {
    return {
      userInfo: {},
      isShowNickname: false,
      isShowPassword: false,
      isShowGender: false,
      genderList: [
        { name: "男", gender: 1 },
        { name: "女", gender: 0 }
      ],
      newNickname: "",
      newPassword: ""
    };
  },
  created() {
    // 获取数据

    this.loadPage();
  },
  methods: {
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("userId"),
        // headers: {
        //   Authorization: localStorage.getItem("token")
        // }
      }).then(res => {
        const { data, message } = res.data;
        if (message == "获取成功") {
          this.userInfo = data;
          // console.log(data.head_img)
        }
      });
    },
    setNickname() {
      // 点击了昵称输入框
      // 可以拿到昵称
      const data = { nickname: this.newNickname };
      this.editProfile(data);
      //修改完密码后，将输入框的值清空
      this.newNickname = "";
    },
    setPassword() {
      const data = {
        password: this.newPassword
      };
      this.editProfile(data);
      //修改完密码后，将输入框的值清空
      this.newPassword = "";
    },
    setGender(action) {
      // console.log("选中了一个性别");
      // console.log(action.gender);
      const data = {
        gender: action.gender
      };
      this.editProfile(data);
      this.isShowGender = false;
    },
    editProfile(data) {
      this.$axios({
        method: "post",
        url: "/user_update/" + localStorage.getItem("userId"),
        // headers: {
        //   Authorization: localStorage.getItem("token")
        // },
        data
      }).then(res => {
        console.log(res.data);
        this.loadPage();
      });
      // console.log('修改密码正确');
    },
    afterRead(fileObj) {
      console.log("这里是文档读取后的回调");
      console.log("可以拿到选中的文件对象");
      console.log(fileObj);
      // 其中我需要传出去的是 file 属性, 里面存放了图片文件

      // 要上传二进制文件, 需要用到 FormData 对象
      const fd = new FormData();
      fd.append('file',fileObj.file);

      //真正发送请求
      this.$axios({
        method:'post',
        url:"/upload",
        data:fd,
        // headers:{
        //   Authorization: localStorage.getItem("token"),
        // }
      }).then((res)=>{
        console.log(res.data);
        const{message,data} = res.data;
        if(message == '文件上传成功'){
          console.log(data.url)
          const newData = {
            head_img:data.url,
          };
          this.editProfile(newData)
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
.imgWrapper {
  height: 148 /360 * 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  .avatar {
    height: 70 /360 * 100vw;
    width: 70 /360 * 100vw;
    border-radius: 50%;
    object-fit: cover;
    // object-fit: contain;
  }
}
</style>